<template>
  <view>
    <z-paging
      ref="paging"
      v-model="data"
      @query="queryList"
      auto-show-system-loading
      use-virtual-list
    >
      <template #top>
        <s-nav title="便民服务"></s-nav>
        <!-- <view  style="background: #ff0000; height: 248rpx"></view> -->
      </template>
      <view>
        <s-card
          v-for="(item, index) in data"
          title="card"
          :key="index"
          @tap="detail(item)"
        >
          <template #header>
            <view class="card-header">
              <view class="status" :class="statusClass[item.flowStatusId]">{{
                item.flowStatus
              }}</view>
              <view class="title">{{ item.applicationItems }}</view>
              <img class="right" src="../static/right.png" />
            </view>
          </template>
          <view class="content">
            <view class="item">
              <view class="label">申请时间：</view>
              <view class="value">{{ item.createdTs }}</view>
            </view>
            <view class="item">
              <view class="label">申请人：</view>
              <view class="value">{{ item.name }}</view>
            </view>
            <view class="item">
              <view class="label">用章类型：</view>
              <view class="value">{{ item.stampType }}</view>
            </view>
            <view class="item">
              <view class="label">证明类型：</view>
              <view class="value">{{ item.type }}</view>
            </view>
            <view class="item">
              <view class="label">具体内容：</view>
              <view class="value">{{ item.applicationItemsDetail }}</view>
            </view>
          </view>
        </s-card>
      </view>
    </z-paging>
    <s-affix description="我要开证明" @tap="download()"></s-affix>
  </view>
</template>

<script>
import { post } from "../../utils/request";
import { REQUEST_SUCCESS_CODE } from "../../constant";
export default {
  data() {
    return {
      statusClass: {
        2: "check",
        3: "upload",
        4: "success",
        5: "fail",
      },
      data: [],
      dataList: [],
    };
  },
  async onLoad() {
    // const result = await post('/api/xsbs/xsbsCertifyInfo/app/getCertifyInfo',{current: 1,size: 99});
    // if(result.code === REQUEST_SUCCESS_CODE) {
    //     this.data = result.data.content;
    // }
  },
  methods: {
    detail(item) {
      console.log(this.data);
      uni.navigateTo({
        url: `/amenity/pages/list/detail?params=${JSON.stringify(item)}`,
      });
    },
    async queryList(pageNo, pageSize) {
      const params = {
        current: pageNo,
        size: pageSize,
      };
      const result = await post(
        "/api/application/xsbsCertifyInfo/app/getCertifyInfo",
        params
      );
      if (result.code === REQUEST_SUCCESS_CODE) {
        console.log(this.data);
        if (!this.data) {
          this.data = result.data.content;
        }
        this.$refs.paging.complete(result.data.content);
      }
    },
    download() {
      uni.navigateTo({ url: "/amenity/pages/form/index" });
    },
  },
};
</script>
<style lang="scss">
.zp-view-super {
  margin-top: -116rpx;
  z-index: 20;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24rpx;
  margin-bottom: 36rpx;
  .status {
    padding: 4rpx 22rpx;
    background: #fff2de;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
  }
  .check {
    background: #fff2de;
    color: #ff9900;
  }
  .success {
    background: rgba(158, 224, 156, 0.6);
    color: #0e9509;
  }
  .upload {
    background: rgba(202, 207, 255, 0.6);
    color: #001aff;
  }
  .fail {
    color: #ff0606;
    background: #ffd7d7;
  }
  .title {
    flex: 1;
    font-weight: bold;
    color: #222222;
    font-size: 32rpx;
  }
  .right {
    width: 32rpx;
    height: 32rpx;
  }
}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  .item {
    display: flex;
    font-size: 24rpx;
    color: #888888;
    font-weight: 400;
    .label {
      width: 120rpx;
    }
    .value {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
